<template>
    <h4>RouterLink组件的使用</h4>
    <pre class="note">
    RouterLink 导航定义的导航,在vue页面渲染时，默认渲染为 a 标签;
        <img src="@/assets/error/42.png" alt="" srcset="">
    同时VueRouter模块也提供了三种RouterLink的导航使用方式
        1. 标签包裹RouterLink
            <img src="@/assets/error/43.png" alt="" srcset="">
        2. RouterLink分发自定义标签
            <img src="@/assets/error/44.png" alt="" srcset="">
        3. RouterLink通过分发替换导航标签
            + 定义custom 属性启动分发标签替换a标签 
                => 当以替换方式完成导航标签生成时，会因为是非a标签丢失导航点击切换操作
                => 通过 RouterLink 组件分发的导航方法 navigate 进行事件绑定定义
            <img src="@/assets/error/45.png" alt="" srcset="">
    激活路由样式控制
        app.use(router) 提供两个用于描述激活路由样式的class样式名
        => .router-link-active 样式
            - 该样式被自动定义在 RouterLink 签上
            - 样式随着激活路由的变化，选择出现在路径中 包含当前路径 的RouterLink标签上
        => .router-link-exact-active 样式
            - 该样式被自动定义在RouterLink标签上
            - 样式随着激活路由的变化，选择出现在路径 完全相同 的RouterLink标签上
        => 如果RouterLink标签采用custom覆盖规则，上述两个样式将无法自动增加到对应标签上，可通过分发参数 isActive和isExactActive控制
            <img src="@/assets/error/46.png" alt="" srcset="">
    </pre>
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss" scoped>

</style>